<template>
  <div class="lendDialog">
    <el-dialog
      :title="$t('lend')"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      width="1200px"
    >
      <el-card shadow="never">
        <myHeader
          ref="searchForm"
          :result-data="resultData"
          :flag-mode="flagMode"
          @onEnter="onEnter"
        />
        <dynTable
          v-show="flagMode"
          ref="dynTable"
          :loading="false"
          :table-data="tableData"
          :table-columns="tableColumns"
        />
      </el-card>
      <span slot="footer">
        <el-button icon="el-icon-circle-close" @click="handleClose">{{
          $t("cancel")
        }}</el-button>
        <el-button
          type="primary"
          icon="el-icon-document-checked"
          @click="doLend"
        >{{ $t("lend") }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import myHeader from '../compontents/header'
import toolingApi from '@/api/Tooling/toolingBasicInfo'
import mySetting from '@/mixins/mySetting'
import networkTips from '@/mixins/networkTips'
export default {
  name: 'LendDialog',
  components: { myHeader },
  mixins: [mySetting, networkTips],
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      resultData: {},
      flagMode: 0,
      tableColumns: [
        {
          prop: '',
          label: this.$t('index'),
          type: 'index',
          width: '50px',
          templete: (_scope) => {
            return (
              <span>
                {(this.listQuery.page - 1) * this.listQuery.size +
                _scope.$index +
                1}
              </span>
            )
          }
        },
        { prop: 'toolingBarcode', label: this.$t('toolingBarcode') },
        { prop: 'toolingType', label: this.$t('toolingType') },
        { prop: 'toolingModel', label: this.$t('toolingModel') },
        { prop: 'stock', label: this.$t('stock') },
        { prop: 'owner', label: this.$t('owner') },
        { prop: 'actionType', label: this.$t('actionType'), templete: (_scope) => {
          return (
            <span>{this.$t('lend')}</span>
          )
        } },
        { prop: 'usedTime', label: this.$t('lendTimes') },
        { prop: 'toLend', label: this.$t('lendId'), templete: () => {
          return (
            <span>{ this.$store.state.user.user.userName }</span>
          )
        } },
        {
          prop: '',
          width: '60px',
          label: this.$t('action'),
          templete: (_scope) => {
            return (
              <el-link
                type='primary'
                underline={false}
                onClick={() =>
                  this.scopedHandle(_scope.row)
                }
              >
                {this.$t('delete')}
              </el-link>
            )
          }
        }
      ]
    }
  },
  watch: {
    flagMode: {
      handler() {
        if (this.flagMode === 2) {
          this.tableColumns.splice(4, 0, {
            prop: 'lendNums', label: this.$t('nums'), templete: (_scope) => {
              return (
                <el-input value={_scope.row.lendNums || 1} vOn:input={(value) => {
                  _scope.row.lendNums = value
                }}/>
              )
            }
          })
          // 删除下标 + 1, 因为上面添加了nums
          this.tableColumns.splice(8, 1)
        }
      }
    }
  },
  methods: {
    // 借出备件
    doLend() {
      this.$refs.searchForm.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const { lendRemark, lendTo, eqpname } = this.$refs.searchForm.formInline
          const arr = this.tableData.map(c => {
            return {
              ...c,
              lendRemark,
              lendTo,
              toLend: this.$store.state.user.user.userName,
              eqpId: eqpname
            }
          })
          toolingApi.lendTooling(arr).then((res) => {
            this.$betterTips(res, this.handleClose, this.handleUpdate)
          })
        } else {
          return false
        }
      })
    },
    // 备件信息
    onEnter(val) {
      toolingApi
        .getToolingInfo({ toolingBarcde: val.toolingBarcode, actionType: 1 })
        .then((res) => {
          if (res.code === 1) {
            this.resultData = res.data
            //  数组为空或者mode一致并且不重复
            if (this.tableData.length === 0 || this.tableData.some(ele => ele.mode === res.data.mode)) {
              if (!this.tableData.some(ele => ele.id === res.data.id)) {
                this.flagMode = res.data.mode
                this.tableData.push(res.data)
                this.$betterTips(res)
              } else {
                this.$message.error('不能重复添加')
              }
            } else {
              this.$message.error(this.$t('differentType'))
            }
          } else {
            this.$betterTips(res)
          }
        })
    },
    // 关闭弹窗
    handleClose() {
      this.$refs.searchForm.clearAllForm()
      Object.assign(this.$data, this.$options.data.call(this))
    },
    // 打开弹窗
    openDialog() {
      this.dialogVisible = true
    },
    handleUpdate() {
      this.$emit('initList')
    },
    scopedHandle(val) {
      this.tableData = this.tableData.filter((ele) => ele.id !== val.id)
    }
  }
}
</script>
